<template>
  <div class="nav-swiper">
    <div class="nav-swiper-main">
      <div class="swiper-top">
        <ul @mouseleave="mouseOut">
          <li :class="currentIndex === item.id ? 'active' : ''" v-for="item in firstList" :key="item.id"
            @mouseenter="mouseHover(item.id)">
            <span>{{ item.categoryName }}</span>
            <el-icon>
              <ArrowRight />
            </el-icon>
          </li>
          <div class="active-right" v-if="isShow">
            <div class="active-right-top">
              <h3 class="active-title">基础知识</h3>
              <div>
                <div>知识点：</div>
                <ul>
                  <li v-for="item in secondList" :key="item.id">{{ item.categoryName }}</li>
                </ul>
              </div>
            </div>
            <div class="active-right-bottom">
              <ul>
                <li v-for="item in courseList" :key="item.id">
                  <img :src="item.courseCover" alt="">
                  <div>
                    <div class="active-course-title">{{ item.courseName }}</div>
                    <div class="active-course-type">{{ courseTypeFn(item.courseLevel) }} · {{ item.clicks }}人报名</div>
                    <div class="active-course-price">免费学习</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </ul>
        <div>
          <el-carousel :interval="5000" arrow="always" v-if="sliders.length">
            <el-carousel-item v-for="item in sliders" :key="item.id">
              <img :src="item.imageUrl" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <ul class="swiper-bottom">
        <li>
          <img src="@/assets/img/chuji.png" alt="">
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/chuji.png" alt="">
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/chuji.png" alt="">
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/chuji.png" alt="">
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/chuji.png" alt="">
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { getSliders } from '@/utils/api/slider.js'
import { getFirstCategorys, getSecondCategorys, courseSearch } from '@/utils/api/course'
// hooks
import courseType from '@/hooks/courseType'
const { courseTypeFn } = courseType()
const sliders = ref([])
// 轮播图数据
getSliders().then(res => {
  sliders.value = res.data.list
})
const firstList = ref([])
// 右侧数据切换
const isShow = ref(false)
const secondList = ref([])
const courseList = ref([])
const currentIndex = ref(0)
// 一级分类
getFirstCategorys().then(res => {
  firstList.value = res.data.list
})
// 鼠标移入
const mouseHover = (id) => {
  isShow.value = true
  currentIndex.value = id
  // 获取二级分类
  getSecondCategorys({
    categoryId: id
  }).then(res => {
    secondList.value = res.data.list
  })
  // 获取课程
  courseSearch({
    pageNum: 1,
    pageSize: 4,
    entity: {
      firstCategory: id
    }
  }).then(res => {
    courseList.value = res.data.pageInfo.list
  })
}
// 鼠标移出
const mouseOut = () => {
  currentIndex.value = 0
  isShow.value = false
}
</script>

<style lang="scss" scoped>
.nav-swiper {
  background: url('@/assets/img/transitionbg.png') no-repeat center center / cover;
  width: 100%;
  height: 600px;
}

.nav-swiper-main {
  width: 1000px;
  margin: 0 auto;
  padding: 47px 0;

  .swiper-top {
    height: 373px;
    border-radius: 11px 11px 0 0;
    display: flex;

    >ul {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 160px;
      height: 100%;
      background: #2b283d;
      border-radius: 11px 0 0 0;

      >li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 120px;
        height: 37px;
        padding: 0 20px;
        color: #f2f2f2;
        font-size: 16px;
        cursor: pointer;

        &.active {
          background: linear-gradient(90deg, #3FE5FF 0%, rgba(62, 222, 255, 0.93) 2%, rgba(60, 203, 255, 0.73) 9%, rgba(58, 186, 255, 0.56) 17%, rgba(57, 172, 255, 0.41) 25%, rgba(55, 160, 255, 0.28) 33%, rgba(54, 150, 255, 0.18) 43%, rgba(53, 142, 255, 0.1) 53%, rgba(53, 137, 255, 0.04) 64%, rgba(53, 133, 255, 0.01) 77%, rgba(53, 133, 255, 0) 100%);
        }
      }

      .active-right {
        width: 724px;
        height: 373px;
        border-radius: 0 11px 0 0;
        background: #fff;
        position: absolute;
        top: 0;
        left: 160px;
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &-top {
          padding: 23px 30px;
          flex: 1;

          &>div {
            display: flex;
            margin-top: 11px;

            ul {
              display: flex;
              flex-wrap: wrap;
              margin-left: 7px;

              li {
                &+li {
                  margin-left: 20px;
                }
              }
            }
          }
        }

        &-bottom {
          width: 724px;
          height: 217px;
          background: #f3f5f6;

          ul {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            height: 100%;
            padding: 0 30px;

            li {
              display: flex;
              width: 50%;

              img {
                width: 140px;
                height: 81px;
              }

              >div {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 4px;

                .active-course-title {
                  font-size: 14px;
                  color: #333;
                }

                .active-course-type {
                  font-size: 12px;
                  color: #808080;
                }

                .active-course-price {
                  font-size: 12px;
                  color: #3586ff;
                }
              }
            }
          }
        }
      }
    }

    >div {
      flex: 1;
      height: 373px;

      .el-carousel {
        height: 373px;

        img {
          width: 100%;
          height: 373px;
        }

        :deep(.el-carousel__container) {
          height: 100%;
        }
      }
    }
  }

  .swiper-bottom {
    display: flex;

    li {
      width: 213px;
      height: 133px;
      background: #fff;
      opacity: 1;
      border-radius: 0 0 0 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      img {
        width: 64px;
        height: 64px;
      }

      >div {
        margin-left: 11px;

        h4 {
          font-size: 16px;
          color: #333;
        }

        span {
          font-size: 12px;
          color: #808080;
        }
      }
    }
  }
}
</style>